<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/receive.css" />
		<title>领取方式</title>
	</head>

	<body>
		<div class="recweb">
			<div class="header">
				<!--预留头部-->
			</div>
			<div class="section">
				<div class="region">
					<!--广东地图-->
					<div class="map">
						<img src="img/receive/guangdong_02.png" />
					</div>
					<!--海南地图-->
					<!--<div class="map2">
						<img src="img/receive/hainan_03.png"/>
					</div>-->
					<!--坐标-->
					<div class="coordinate position_one">
						<a href="exchange.html">
							<img src="img/receive/zuobiao_05.png" />
						</a>
					</div>
					<div class="coordinate position_two">
						<a href="exchange.html">
							<img src="img/receive/zuobiao_07.png" />
						</a>
					</div>
					<div class="coordinate position_three">
						<a href="exchange.html">
							<img src="img/receive/zuobiao_03.png" />
						</a>
					</div>
					<!--切换地区按钮-->
					<div class="switch_button">
						<img src="img/receive/hainan_bottom.png" />
					</div>
					<!--待领取剩余多少套-->
					<div class="receive_text">
						<p>剩余<span>9998</span>套</p>
						<p>婚宴定制囍酒套装</p>
						<p>待领取</p>
					</div>
				</div>
				<div class="payment">
					<img src="img/receive/payment_06.png" />
				</div>
			</div>
			<div class="footer">
				<div class="text">
					<a href="position.html">
						找到离我最近的领取点
					</a>
				</div>
				<div class="home_img">
					<a href="index.html">
						<img src="img/activity_Rules/home.png" />
					</a>
				</div>
			</div>
		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.transit.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var one = $(".region").outerHeight() * 0.4758;
				var three = $(".region").outerHeight() * 0.0619;
				$(".coordinate").css("display","inline-block")
				$(function() {
					$(".position_one").transit({
							y: one
						},
						1000,
						"linear"
					)
				})
				$(function() {
					$(".position_two").transit({
							y: one
						},
						1000,
						"linear"
					)
				})
				$(function() {
					$(".position_three").transit({
							y: three
						},
						600,
						"linear"
					)
				})
			})
			$(".switch_button").on("click", function() {
				if($(this).find("img").attr("src") == "img/receive/hainan_bottom.png") {
					$(this).find("img").attr("src", "img/receive/guangdong_button.png")
					$(".map").find(("img")).attr("src", "img/receive/hainan_03.png")
					$(".receive_text").css("bottom", "0")
					$(".coordinate").css("display", "none");
				} else {
					$(this).find("img").attr("src", "img/receive/hainan_bottom.png")
					$(".map").find(("img")).attr("src", "img/receive/guangdong_02.png")
					$(".receive_text").css("bottom", "1.25rem")
					$(".coordinate").css("display", "inline-block");
				}
			})
			$(".footer .home_img").on("click",function(){
				location.href = "index.html";
			})
			$(".coordinate").on("click",function(){
				location.href = "exchange.html";
			})
		</script>
	</body>

</html>